<%@ page language="java" import="java.util.*,com.cornergj.model.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="cl"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="ctx" value="<%=request.getContextPath()%>"/>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Corner家政 --联系我们</title>
    <!-- core CSS -->
    <link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/prettyPhoto.css" rel="stylesheet">
    <link href="${ctx}/css/animate.min.css" rel="stylesheet">
    <link href="${ctx}/css/responsive.css" rel="stylesheet">
    <link href="${ctx}/css/gj.css" rel="stylesheet">
    <link href="${ctx}/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="${ctx}/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="${ctx}/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="${ctx}/favicon/favicon.ico"/>
    <script type="text/javascript">
	//如果不是顶级窗口，则先获取顶级窗口，再跳转到登录界面
	if(!(window.parent == window)){
		var topWin= (function (p,c){
		    while(p!=c){
		        c = p        
		        p = p.parent
		    }
		    return c
		})(window.parent,window);
		topWin.location.href='${ctx}' + "/frontpage/toindex.do";
	}
	</script>
	<style>
		.close{
			color:#000;
		}
	</style>
	<link href="${ctx}/css/main.css" rel="stylesheet">
</head><!--/head-->
<body>
    
    <!-- 页头信息 -->
    <%@include file='fronthead.jsp'%>

    <section id="blog" class="container">
        <div class="center">
            <h2>预约服务</h2><a href='#' id="errormsg" class="" data-toggle='modal' data-target='#ErrorMsg'></a>
            <p class="lead">您可以在此预约服务，我们会尽快安排上门服务</p>
        </div>

        <div class="blog" >
            <div class="row" style="margin-left:50px">
                 <div class="col-md-8">
                    <div class="blog-item">
                        <h2>预约订单：</h2>
                    </div><!--/.blog-item-->
                    <div class="col-md-10">
                         	服务内容：<h2>${getServiceContent.serviceName }服务<c:if test="${getServiceContent.unit=='小时'}">(预约钟点工请在备注中填写时间段)</c:if></h2>
                    </div><!--/.blog-item-->
                    <div class="col-md-10">
                         	联系人姓名：<input type="text" name="username" id="username" class="form-control commonuser" required="required" placeholder="请输入联系人姓名" />
                    </div><!--/.blog-item-->
                    <div class="col-md-10">
                         	联系方式：<input type="text" name="phone" id="phone" class="form-control commonuser" required="required" placeholder="请输入联系方式" />
                    </div><!--/.blog-item-->
                    <div class="col-md-5">
                         	服务省份：
                         	<select id="provinceId" name="serviceProvince" class="form-control" style="width:100%">
								<c:forEach var="item" items="${ProvinceSiteList}">
									<option value="${item.id}">${item.province }</option>
								</c:forEach>
							</select>
                    </div><!--/.blog-item-->
                     <div class="col-md-5">
                         	服务城市：
                         	<select id="cityId" name="serviceCity" class="form-control" style="width: 100%">
								<c:forEach var="item" items="${CitySiteList}">
   										<option value="${item.id}">${item.city }</option>
								</c:forEach>
							</select>
                    </div><!--/.blog-item-->
                    <div class="col-md-10">
                         	服务详细地址：<input type="text" name="address" id="address" class="form-control commonuser" required="required" placeholder="请输入服务地址" />
                    </div><!--/.blog-item-->
                    <div class="col-md-10">
                    	选择起始日期：</br>
                         <div class="form-group" id="data_1">
                            <div class="input-group date">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input type="text" id="starttime" name="starttime" class="form-control" value="${nowdate }"/>
                            </div>
                        </div>
                    </div><!--/.blog-item-->
                    <div class="col-md-10">
                         <div class="m-b-sm m-t">
                            	选择服务周期：
                        </div>
                        <div id="ionrange_4"></div>
                    </div><!--/.blog-item-->
                     <div class="col-md-10">
                         	备注信息：
                         	<textarea name="remark" id="remark" required="required" class="form-control nannyuser" rows="8" placeholder="请输入您的备注信息(请不要超过100个字符)" pattern="^.{1,100}$""></textarea>
                    </div><!--/.blog-item-->
                    <div class="col-md-10">
                    	</br></br>
                    	<c:if test="${getServiceContent.unit=='月'}">
                    		<div style="float:right">
                    			<span style="font-size:30px"><strong>费用：</strong></span><span class="pricespan"><strong>￥&nbsp;&nbsp;<span id="serviceprice">${getServiceContent.avgSalary}</span></strong></span>
                    		</div>
           				</c:if>
                    	<c:if test="${getServiceContent.unit=='小时'}">
                    		<div style="float:right">
                    			<span style="font-size:30px"><strong>费用：</strong></span><span class="pricespan"><strong>￥&nbsp;&nbsp;<span id="serviceprice">${getServiceContent.avgSalary}</span>/${getServiceContent.unit}</strong></span>
                    		</div>
           				</c:if>
                    	</br></br>
                    	<div style="float:right">
                    		<span>目前只支持线下付款</span>
                    	</div>
                    	</br></br>
                    	<div class="form-group" style="float:right">
                         	<button type="submit" name="submit" class="btn GJBlackbutton btn-lg" required="required" style="background:#000;color:#fff;" onclick="submitorder()">提交预约</button>
                    	</div> 
                    </div>
                    
                    
                </div><!--/.col-md-8-->

                <aside class="col-md-4">
                   
    				<div class="widget categories">
                        <h3>热门服务</h3>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="single_comments">
                                    <img src="https://qiniu.cornergj.top/services.png" style="width:50px;height:50px" alt=""  />
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </p>
                                    <div class="entry-meta small muted">
                                        <span>By <a href="#">Alex</a></span <span>On <a href="#">Creative</a></span>
                                    </div>
                                </div>
                                <div class="single_comments">
                                    <img src="https://qiniu.cornergj.top/services.png" style="width:50px;height:50px" alt=""  />
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </p>
                                    <div class="entry-meta small muted">
                                        <span>By <a href="#">Alex</a></span <span>On <a href="#">Creative</a></span>
                                    </div>
                                </div>
                                <div class="single_comments">
                                    <img src="https://qiniu.cornergj.top/services.png" style="width:50px;height:50px" alt=""  />
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </p>
                                    <div class="entry-meta small muted">
                                        <span>By <a href="#">Alex</a></span <span>On <a href="#">Creative</a></span>
                                    </div>
                                </div>
                                
                            </div>
                        </div>                     
                    </div><!--/.recent comments-->
                     

                    <div class="widget categories">
                        <h3>Categories</h3>
                        <div class="row">
                            <div class="col-sm-6">
                                <ul class="blog_category">
                                    <li><a href="#">Computers <span class="badge">04</span></a></li>
                                    <li><a href="#">Smartphone <span class="badge">10</span></a></li>
                                    <li><a href="#">Gedgets <span class="badge">06</span></a></li>
                                    <li><a href="#">Technology <span class="badge">25</span></a></li>
                                </ul>
                            </div>
                        </div>                     
                    </div><!--/.categories-->
    				
    				<div class="widget archieve">
                        <h3>Archieve</h3>
                        <div class="row">
                            <div class="col-sm-12">
                                <ul class="blog_archieve">
                                    <li><a href="#"><i class="fa fa-angle-double-right"></i> December 2013 <span class="pull-right">(97)</span></a></li>
                                    <li><a href="#"><i class="fa fa-angle-double-right"></i> November 2013 <span class="pull-right">(32)</a></li>
                                    <li><a href="#"><i class="fa fa-angle-double-right"></i> October 2013 <span class="pull-right">(19)</a></li>
                                    <li><a href="#"><i class="fa fa-angle-double-right"></i> September 2013 <span class="pull-right">(08)</a></li>
                                </ul>
                            </div>
                        </div>                     
                    </div><!--/.archieve-->
    				
    			</aside>  
            </div><!--/.row-->
        </div>
    </section><!--/#blog-->

    <!-- 登录模块 -->
    <%@include file="loginmodel.jsp"%>
    <!-- 页脚模块 -->
   	<%@include file="frontfoot.jsp"%>
	<!-- 错误信息提示窗口 -->
    <div class="modal fade" id="ErrorMsg" tabindex="-1" role="dialog"
       aria-labelledby="myModalLabel" aria-hidden="true" ><!-- /.modal -->
    <div class="modal-dialog" style="width:20%;margin-top:10%">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close"
                  data-dismiss="modal" aria-hidden="true">
            &times;
          </button>
          <h4 class="modal-title" id="myModalLabel">
            <img src="${ctx }/favicon/favicon.ico" style="margin-top:-5px;width: 50px;height:50px" />错误提示：
          </h4>
        </div>
        <br class="modal-body">
        	<div class="text-center">
        		<h4 id="showErrorMsg"></h4>
        	</div>
          </br>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
    <script src="${ctx}/js/jquery.js"></script>
    <script src="${ctx}/js/bootstrap.min.js"></script>
    <script src="${ctx}/js/jquery.prettyPhoto.js"></script>
    <script src="${ctx}/js/jquery.isotope.min.js"></script>
    <script src="${ctx}/js/main.js"></script>
    <script src="${ctx}/js/wow.min.js"></script>
    <script src="${ctx}/js/url.js"></script>
    <script src="${ctx}/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
    <script src="${ctx}/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script type="text/javascript" language="javascript">
    	$('#data_1 .input-group.date').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });
           
           var rangeval=1;
           
           var monthlist= [
                "1个月", "2个月", "3个月",
                "4个月", "5个月", "6个月",
                "7个月", "8个月", "9个月",
                "10个月", "11个月", "12个月"
            ]   
           
        $("#ionrange_4").ionRangeSlider({
            values:monthlist,
            type: 'single',
            hasGrid: true,
            onChange: function(obj){        // function-callback, is called on every change
        		var vv= $(".irs-single").html();
        		var monval=vv.substring(0,vv.length-2);
        		if(monval!=rangeval){
        			rangeval=monval;
        		}
        		<c:if test="${getServiceContent.unit=='月'}">
        			if(monval<3){
        				$("#serviceprice").html(monval*${getServiceContent.avgSalary});
        			}else if(3<=monval&&monval<=5){
        				$("#serviceprice").html(monval*${getServiceContent.discount1});
        			}else if(6<=monval&&monval<=11){
        				$("#serviceprice").html(monval*${getServiceContent.discount2});
        			}else if(monval==12){
        				$("#serviceprice").html(monval*${getServiceContent.discount3});
        			}
        		</c:if>
        		<c:if test="${getServiceContent.unit=='小时'}">
        			if(monval<3){
        				$("#serviceprice").html(${getServiceContent.avgSalary});
        			}else if(3<=monval&&monval<=5){
        				$("#serviceprice").html(${getServiceContent.discount1});
        			}else if(6<=monval&&monval<=11){
        				$("#serviceprice").html(${getServiceContent.discount2});
        			}else if(monval==12){
        				$("#serviceprice").html(${getServiceContent.discount3});
        			}
        		</c:if>
         		
    		},
        });
        
        
       var submitorder=function(){
       		if($.trim($("#phone").val())==""){
       			$("#showErrorMsg").html("联系方式不允许为空");
       			$("#errormsg").click();
       			return;
       		}
       		if($.trim($("#username").val())==""){
       			$("#showErrorMsg").html("联系人不允许为空");
       			$("#errormsg").click();
       			return;
       		}
       		if($.trim($("#address").val())==""){
       			$("#showErrorMsg").html("联系地址不允许为空");
       			$("#errormsg").click();
       			return;
       		}
       		if($.trim($("#starttime").val())==""){
       			$("#showErrorMsg").html("日期不允许为空");
       			$("#errormsg").click();
       			return;
       		}
       		if($("#provinceId").val()=="" || $("#provinceId").val()==null){
       			$("#showErrorMsg").html("请选择服务省份");
       			$("#errormsg").click();
       			return;
       		}
       		if($("#cityId").val()=="" || $("#cityId").val()==null){
       			$("#showErrorMsg").html("请选择服务城市");
       			$("#errormsg").click();
       			return;
       		}
       
       		if(<%=session.getAttribute("COMMONUSER")!=null %>){//已经登录
       			$.ajax({ 
             	type : "post",
             	url : url.server+param.submitorder,
             	data : { 
              		"contactMethod" : $("#phone").val(),
              		"contacts":$("#username").val(),
              		"cost":$("#serviceprice").html(),
              		"remarks":$("#remark").val(),
              		"serviceAddress":$("#address").val(),
              		"serviceCycle":rangeval,
              		"serviceTime":$("#starttime").val(),
              		"serviceId":${getServiceContent.id},
              		"serviceProvince":$("#provinceId").val(),
              		"servicCity":$("#cityId").val()
            	},
             	success: function(res) {
                	console.log(res);
                	if (res.status == '1') {
                		window.location.href = "${ctx }/frontpage/ordersuccess.do?ordercode="+res.data;
                	}
                	if (res.status == '2') {
                		$("#showErrorMsg").html(res.message[0].msg);
       					$("#errormsg").click();
                	}
            	} 
       		 });
       			
       		}else{
       			$("#showErrorMsg").html("请先登录才能预约服务");
       			$("#errormsg").click();
       		}
       }
        
       //获取对应的城市站点列表
	$("#provinceId").change(function(){
		$.ajax({ 
             type : "get",
             url : url.server+param.getCitySite,
             data : { 
              "proviceid" : $("#provinceId").val()
            },
             success: function(res) {
                console.log(res);
                if (res.status == '1') {
                $("#cityId").html("");
                    for(var i=0;i<res.data.length;i++){
                    	$("#cityId").append("<option value='"+res.data[i].id+"'>"+res.data[i].city+"</option>");
                    }
                }
                if (res.status == '2') {
                    
                }
            } 
        });
	});
    </script>
</body>
</html>